<template>
  <div class="member">
    <el-row justify="space-between" class="headline">
      <el-col :span="2">
        <span>添加成员</span>
      </el-col>
      <el-col :span="2">
        <el-button @click="goback" size="small">返回</el-button>
      </el-col>
    </el-row>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
      <el-row>
        <el-col :span="16">
          <el-form-item label="员工工号" prop="account">
            <el-input v-model="ruleForm.account" placeholder="登录账号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="手机号" prop="phone" maxlength="11">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <!-- <el-form-item label="所属机构">
            <el-select v-model="ruleForm.department">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item> -->
      <el-form-item label="登录密码" prop="passwd" type="password">
        <el-input v-model="ruleForm.passwd" />
      </el-form-item>
      <!-- </el-form> -->
      <el-col :span="10" :offset="1">
        <!-- <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon> -->
        <el-form-item label="成员姓名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="邮箱地址" prop="emil">
          <el-input v-model="ruleForm.emil" />
        </el-form-item>
        <!-- <el-form-item label="所属角色">
            <el-select v-model="ruleForm.role">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item> -->
        <!-- <el-form-item label="允许登录">
            <el-switch v-model="value1" />
          </el-form-item> -->
      </el-col>
    </el-form>

    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <el-form>
          <el-form-item label="备注信息">
            <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容" rows="5" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" :offset="10">
        <el-button size="small" @click="onSubmit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import router from "@/router";
import $tab from "@/plugins/tab.js";
import { addAccount } from "@/api/role";
import { ElMessage } from "element-plus";
//
const route = useRoute();
const plugins = getCurrentInstance;
const formSize = ref("default");
const ruleForm = reactive({
  account: route.query.login_name, //账号
  name: route.query.real_name, //姓名
  phone: route.query.phone, //手机号
  emil: route.query.emil, //邮箱
  department: "", //部门
  role: "", //角色
  passwd: "", //密码
  again: "", //确认密码
  allow: "", //允许
  remark: "", //备注
});

const ruleFormRef = ref(null);
const value1 = ref(true);
const rules = reactive({
  account: [{ required: true, message: "请填写账号", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "blur",
    },
  ],
  phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  emil: [
    {
      required: true,
      message: "请填写邮箱",
      trigger: "blur",
    },
  ],
  department: [
    {
      required: true,
      message: "请选择部门",
      trigger: "change",
    },
  ],
  role: [
    {
      required: true,
      message: "请选择角色",
      trigger: "change",
    },
  ],
  passwd: [
    {
      required: true,
      message: "请填写密码",
      trigger: "change",
    },
  ],
  again: [
    {
      required: true,
      message: "请填写密码",
      trigger: "change",
    },
  ],
});

function goback() {
  const obj = { path: "/system/member", name: "member" };
  $tab.closePage(obj);
  router.go(-1);
}
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

//添加成员
function onSubmit() {
  ruleFormRef.value
    .validate()
    .then((res) => {
      addAccount(ruleForm).then((res) => {
        console.log(res, "resssss");
        if (res.code == 200) {
          ElMessage({
            message: res.msg,
            type: "success",
          });
        }
      });
    })
    .catch((err) => {
      ElMessage({
        message: "请填完整表单",
        type: "warning",
      });
    });
}
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: center;
  padding: 5px 0;
}
.member :deep(.el-row) {
  margin-bottom: 20px;
}
.tip :deep(.el-form-item__content) {
  font-size: 12px;
}
:deep(.el-select) {
  width: 100%;
}
</style>
